<!-- 用户角色选择器 -->
<script setup>
import {Close} from '@element-plus/icons-vue'
import {computed, ref, watch} from "vue"
import { list as sysRoleList } from '@/api/system/role.js'

const props = defineProps({
  selectedIds: {
    type: Array,
    default: () => []
  },
  visible: {
    type: Boolean,
    default: false
  },
  multi: {
    type: Boolean,
    default: true
  }
})

const search = ref({
  name: '',
})
const selectorData = ref([
  {id: 1, name: '角色1', checked: false},
  {id: 2, name: '角色2', checked: false},
  {id: 3, name: '角色3', checked: false},
  {id: 4, name: '角色4', checked: false},
  {id: 5, name: '角色5', checked: false},
  {id: 6, name: '角色6', checked: false},
  {id: 7, name: '角色7', checked: false},
  {id: 8, name: '角色8', checked: false},
  {id: 9, name: '角色9', checked: false},
  {id: 10, name: '角色10', checked: false}
])
const selectedData = ref([])

//过滤后的角色数据集合
const filterSelectorData = computed(() => {
  if (!search.value.name) {
    return selectorData.value
  }

  return selectorData.value.filter(item => {
    return item.name.includes(search.value.name)
  })
})

const emit = defineEmits(['update:visible'])

const dialogVisible = ref(false)

watch(() => props.visible, (newVal) => {
  if (newVal) {
    sysRoleList({status: 1}).then((resp) => {
      let nodeData = resp.data
      if (props.selectedIds) {
        if (nodeData && nodeData.length > 0) {
          selectedData.value = nodeData.filter(item => {
            return props.selectedIds.includes(item.id)
          })
        }
      }

      selectorData.value = nodeDataConvertSelectorData(resp.data, selectedData.value)
      dialogVisible.value = true
    })
  } else {
    dialogVisible.value = false
  }
}, { immediate: true })

//取消
const onCancel = () => {
  emit('update:visible', false)
}

//确定
const onConfirm = () => {
  emit('select', selectedData.value)
}

//移除
const remove = (item) => {
  const selectedDataIndex = selectedData.value.findIndex(item1 => item1.id === item.id)
  if (selectedDataIndex !== -1) {
    selectedData.value.splice(selectedDataIndex, 1)
  }

  const index = selectorData.value.findIndex(item1=> item1.id === item.id)
  if (index !== -1) {
    selectorData.value[index].checked = false
  }
}

//清空
const removeAll = () => {
  const unSelectedIdArr = selectedData.value.map(item => item.id)
  selectedData.value.splice(0, selectedData.value.length)
  unSelectedIdArr.forEach(id => {
    const index = selectorData.value.findIndex(item => item.id === id)
    if (index !== -1) {
      selectorData.value[index].checked = false
    }
  })
}

//监听Checkbox变化事件
const onCheckboxChange = (event, item) => {
  if (event) {
    if (props.multi) {
      selectedData.value.push({...item})
    } else {
      if (selectedData.value.length > 0) {
        const index = selectorData.value.findIndex(item1=> item1.id === selectedData.value[0].id)
        if (index !== -1) {
          selectorData.value[index].checked = false
        }
      }
      selectedData.value[0] = item
    }
  } else {
    const index = selectedData.value.findIndex(item1 => item1.id === item.id)
    if (index !== -1) {
      selectedData.value.splice(index, 1)
    }
  }
}

//销毁工作
const dialogClose = () => {
  selectorData.value = [
    {id: 1, name: '角色1', checked: false},
    {id: 2, name: '角色2', checked: false},
    {id: 3, name: '角色3', checked: false},
    {id: 4, name: '角色4', checked: false},
    {id: 5, name: '角色5', checked: false},
    {id: 6, name: '角色6', checked: false},
    {id: 7, name: '角色7', checked: false},
    {id: 8, name: '角色8', checked: false},
    {id: 9, name: '角色9', checked: false},
    {id: 10, name: '角色10', checked: false}
  ]
  selectedData.value = []

  search.value = {
    name: ''
  }

  emit('update:visible', false)
}

/**
 * 节点数据转换成选择项数据
 * @param nodeData 响应的节点数据
 * @param selectedData 已选择的数据集合
 */
const nodeDataConvertSelectorData = (nodeData, selectedData) => {
  let selectorData = []
  if (nodeData) {
    nodeData.forEach((item) => {
      let selectorDataItem = {id: item.id, name: item.name, checked: false}

      if (selectedData.length > 0) {
        let findIndex = selectedData.findIndex(item1 => item1.id === item.id)
        if (findIndex !== -1) {
          selectorDataItem.checked = true
        }
      }

      selectorData.push(selectorDataItem)
    })
  }

  return selectorData
}

</script>

<template>
  <el-dialog v-model="dialogVisible" title="角色选择" width="580px" :close-on-click-modal="false" @close="dialogClose">
    <div class="sys-user-selector-main">
      <div class="left">
        <div class="left-tool-box">
          <el-input prefix-icon="Search" v-model="search.name" placeholder="请输入角色名" clearable  />
        </div>
        <div class="left-main">
          <div class="item-list">
            <div class="item" v-for="(item, index) in filterSelectorData" :key="index">
              <el-checkbox v-model="item.checked" :disabled="item.type === 1" @change="(event) => onCheckboxChange(event, item)">
                <template #default>
                  <div style="display: flex; flex-direction: row; align-items: center">
                    <div style="margin-left: 8px">{{item.name}}</div>
                  </div>
                </template>
              </el-checkbox>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="tool-box">
          <div>已选择{{selectedData.length}}项</div>
          <div><el-button link type="danger" @click="removeAll">清空</el-button></div>
        </div>
        <div class="selected-list">
          <div class="item" v-for="(item, index) in selectedData" :key="index">
            <div class="user-info">
              <div class="name">{{ item.name }}</div>
            </div>
            <div class="user-remove">
              <el-icon @click="remove(item)"><Close /></el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.sys-user-selector-main {
  width: 100%;
  height: 380px;
  display: flex;
  flex-direction: row;
  border: 1px solid $cb-border-color;

  .left, .right {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50%;
    box-sizing: border-box;
  }

  .left {
    display: flex;
    flex-direction: column;
    border-right: 1px solid $cb-border-color;
    padding: $cb-padding-value-8;

    .left-main {
      flex-grow: 1;
      overflow: auto;

      .item-list {
        .item {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: $cb-padding-value-8;

          &:hover {
            background: $cb-color-primary-light;
          }

          .sub-node {
            color: $cb-color-primary;
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
          }
        }
      }
    }
  }

  .right {
    display: flex;
    flex-direction: column;

    .tool-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 9px;
      border-bottom: 1px solid $cb-border-color;
    }

    .selected-list {
      display: flex;
      flex-direction: column;
      padding: $cb-padding-value-8;
      overflow: auto;
      flex-grow: 1;

      .item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: $cb-padding-value-8;

        &:hover {
          background: $cb-color-primary-light;
        }

        .user-info {
          display: flex;
          flex-direction: row;
          align-items: center;

          .name {
            margin-left: $cb-margin-value-8;
          }
        }

        .user-remove {
          cursor: pointer;
        }
      }
    }
  }
}
</style>
